<template>
  <!-- BA-BA 购彩(时时彩)(五星)(复式)投注记录 2 -->
  <div id="wrapper">
    <div id="wrap">
      <div class="title-bg">
        <span class="img"></span>
        <span class="titleText">投注记录</span>
        <span class="cha" @click="hide">
          <i class="iconfont iconty_guanbi"></i>
        </span>
      </div>
      <!-- 占位 -->
      <div class="content">
        <p class="tip">当前页仅显示<span>(近15天)</span>订单 更多订单详情请在我的账户>购买记录中<span class="look">查看>></span></p>
        <div class="list">
          <div class="blank">
            <div class="general-info">
              <bill-board>
                <div class="billboard-content">
                  <div class="item border-right">
                    <div class="title">待开奖</div>
                    <div class="quantity statistics">
                    <span>15</span>
                    <span class="extra">注</span>
                    </div>
                  </div>
                  <div class="item border-right">
                    <div class="title">购买金额</div>
                    <div class="amount statistics">
                    <span>-10</span><span class="extra">.00</span>
                    </div>
                  </div>
                  <div class="item">
                    <div class="title">最高奖金</div>
                    <div class="bonus statistics">
                      <span>+1500</span><span class="extra">.00</span>
                    </div>
                  </div>
                </div>
              </bill-board>
            </div>
          </div>
          <ul class="record">
            <li class="formHead">
              <span class='bettingTime'>投注时间</span>
              <span class="wayOfPlay">玩法</span>
              <span class="number">期号</span>
              <span class="purchaseContent">购买内容</span>
              <span class="returnPoint">返点</span>
              <span class="purchaseAmount">购买金额</span>
              <span class="status">状态</span>
            </li>
            <li v-for="(item,index) in record" :key="index" >
              <span class="bettingTime">{{ item.bettingTime }}</span>
              <span class="wayOfPlay">{{ item.wayOfPlay }}</span>
              <span class="number">{{ item.number }}</span>
              <span class="purchaseContent">
                {{ item.purchaseContent }}
                <div class="tip">
                  <div class="rect">
                    <p class="orderNum">订单编号: {{ item.orderNumber }}</p><p class="prizeNum">开奖号码: {{ item.prizeNumber }}</p>
                  </div>
                  <div class="tria"></div>
                </div>
                <a href="">详情</a>
              </span>
              <span class="returnPoint">{{ item.returnPoint }}</span>
              <span class="purchaseAmount">{{ item.purchaseAmount | filterNumber }}</span>
              <span class="status" :class="item.status==='未开奖'?'':'red'">{{ item.status }}</span>
            </li>
          </ul>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import BillBoard from '@/components/base/bill-board/bill-board'
export default {
  components: {
    BillBoard 
  },
  name: 'bettingRecord',
  props:{
    record:{
      type: Array,
      default: () => 
        [
          {
            orderNumber: 12345687891231231,
            prizeNumber: '12 21 45 02',
            bettingTime: '01/30 09:21:15',
            wayOfPlay: '重庆时时彩-五星直选复式',
            number: '1111111',
            purchaseContent: '4,8,4,5,2,0,0',
            returnPoint: '0.20%',
            purchaseAmount: 2500,
            status: '未开奖'
          },
          {
            prizeNumber: '12 21 45 02',
            orderNumber: 1234568789,
            prizeNumber: '12 21 45 02',
            bettingTime: '01/30 09:21:15',
            wayOfPlay: '重庆时时彩-五星直选复式',
            number: '1111111',
            purchaseContent: '4,8,4,5,2,0,0',
            returnPoint: '0.20%',
            purchaseAmount: 2500,
            status: '+3500.00'
          },
          {
            prizeNumber: '12 21 45 02',
            orderNumber: 1234568789,
            bettingTime: '01/30 09:21:15',
            wayOfPlay: '重庆时时彩-五星直选复式',
            number: '170306095',
            purchaseContent: '4,8,4,5,2,0,0',
            returnPoint: '0.20%',
            purchaseAmount: 2500,
            status: '未开奖'
          },
          {
            prizeNumber: '12 21 45 02',
            orderNumber: 1234568789,
            bettingTime: '01/30 09:21:15',
            wayOfPlay: '重庆时时彩-五星直选复式',
            number: '170306095',
            purchaseContent: '4,8,4,5,2,0,0',
            returnPoint: '0.20%',
            purchaseAmount: 2500,
            status: '未开奖'
          },
          {
            prizeNumber: '12 21 45 02',
            orderNumber: 1234568789,
            bettingTime: '01/30 09:21:15',
            wayOfPlay: '重庆时时彩-五星直选复式',
            number: '170306095',
            purchaseContent: '4,8,4,5,2,0,0',
            returnPoint: '0.20%',
            purchaseAmount: 2500,
            status: '未开奖'
          },
          {
            prizeNumber: '12 21 45 02',
            orderNumber: 1234568789,
            bettingTime: '01/30 09:21:15',
            wayOfPlay: '重庆时时彩-五星直选复式',
            number: '170306095',
            purchaseContent: '4,8,4,5,2,0,0',
            returnPoint: '0.20%',
            purchaseAmount: 2500,
            status: '未开奖'
          },
        ]
      }
  },
  data(){
    return{
      formHead:['投注时间','玩法','期号','购买内容','返点','购买金额','状态'],
    }
  },
  filters:{
    filterNumber(value){
      let realVal = parseFloat(value).toFixed(2)
      return realVal
    }
  },
  methods: {
    hide() {
      this.$emit('click')
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'

  #wrapper
    position fixed;
    top 0;
    left 0;
    right 0;
    bottom 0;
    background-color rgba(0,0,0,.2);
    
    #wrap
        position absolute;
        top 50%;
        left 50%;
        transform translate(-50%,-50%);
        width 902px;
        height 660px;
        max-height 100%;
        background-color: #faf8f8;
        // border 1px solid red;
        border-radius 3px;
        .title-bg
            height 48px;
            width 902px;
            background-color #1f2431;
            border-top-left-radius 3px;
            border-top-right-radius 3px;
            position absolute;
            top 0;
            left 0;
            .img
                float left;
                margin-top 13px;
                margin-left 14px;

                // 占位代码
                width 18px;
                height 20px;
                border 1px solid red;
            .titleText
                float left;
                width 837px;
                height 48px;
                // text-indent 417px;
                text-align center;
                font-weight bold;
                font-size 15px;
                color #fff;
                line-height 48px;
            .cha
                float left;
                margin-top 17px;
                // 占位代码
                width 13px;
                line-height 13px;
                .iconfont 
                    color $color-theme-red 
                    font-size 26px
        
        .content
          box-sizing border-box;
          width 100%;
          // height 610px;
          height: 100%;
          overflow hidden;
          padding-top 48px;
          padding-right 2px;
        .tip
            box-sizing border-box
            width 100%;
            height 30px;
            border 1px solid #fad3ba;
            background-color #fef5e5;
            text-indent 22px;
            line-height 30px;
            font-size 14px;
            color #584844;

            span 
                color #e02828;
            .look
                cursor pointer;

        .list
            box-sizing border-box
            width 100%;
            max-height 100%;
            height 578px;
            border 1px solid #dbd3d3;
            border-top 1px solid transparent;
            background-color #faf8f8;
            overflow auto;
            padding-bottom 20px;
                /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
            ::-webkit-scrollbar
                
                width: 4px;
                height: 16px;
                background-color: #F5F5F5;
            
            /*定义滚动条轨道 内阴影+圆角*/
            ::-webkit-scrollbar-track
                -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
                border-radius: 10px;
                background-color: #F5F5F5;
            
            /*定义滑块 内阴影+圆角*/
            ::-webkit-scrollbar-thumb
                border-radius: 10px;
                -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
                background-color: #555;
                
            .blank
                width 860px;
                height 78px;
                background-color #eee;
                margin-top 10px;
                margin-bottom 10px;
                margin-left 19px;
                .general-info >>> .bg-bar  
                    width 101%
                .general-info 
                    width 100%
                    padding 10px 10px 8px 10px
                    box-sizing border-box
                    position relative
                    .billboard-content 
                        width 100% 
                        display flex
                        padding 15px 0
                        background #fff
                        .item 
                            width 33.33% 
                            box-sizing border-box 
                            display flex 
                            flex-direction column 
                            justify-content center
            .record
              width 860px;
              border-radius 5px;
              margin-left 19px;
              li
                  width 860px;
                  height 36px;
                  line-height 36px;
                  background-color #faf8f8;
                  border-bottom 1px solid #dbd3d3;
                  color #3a384d;
                  font-size 0;
                  border-left 1px solid #dbd3d3;
                  border-right 1px solid #dbd3d3;
                  span
                      display inline-block;
                      font-size 14px;                
                  .bettingTime
                      width 130px;
                      text-indent 12px;
                  .wayOfPlay 
                      width 196px;
                  .number
                      width 100px;
                  .purchaseContent 
                      position relative
                      width 180px;
                      a
                          position absolute;
                          right 10px;
                          display none;
                          color red;
                          text-decoration none;
                          cursor pointer;
                          bottom 1px;
                      .tip
                          display none;
                          position absolute;
                          top -72px;
                          left -120px;
                          width 240px;
                          height 72px;
                          // background-color #000;
                          border-radius 5px;
                          color #fff;
                          .rect
                            position absolute
                            top 0;
                            width 240px;
                            height 68px;
                            background-color rgba(0,0,0,.8);
                            border-radius 5px;
                            text-align center
                            p
                              width 222px;
                              height 20px;
                              // bottom  0;
                              margin-left 18px;
                              line-height 20px;
                              text-align left;
                              left 18px;
                            .orderNum
                              margin-top 16px;
                        .tria
                          position absolute;
                          left 115px;
                          bottom 0px;
                          width 10px;
                          height 10px;
                          background-color #323232;
                          transform rotate(45deg);
                .purchaseContent:hover .tip
                  display block;
                .purchaseContent:hover a
                  display inline-block;
                .returnPoint
                  width 70px;
                .purchaseAmount
                  width 90px;
                  color green;
                .status
                  width 92px;
                .red
                  color red;
              .formHead
                width 862px;
                background-color #e8e0dd
                border-top 1px solid #dbd3d3
                border-top-left-radius 5px
                border-top-right-radius 5px
                color #5a4844
                font-weight bold
                margin 0;
                box-sizing border-box;
                .purchaseAmount
                  color #5a4844

            


</style>